<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<style>
    .layui-table-cell {
        height: 120px;
        line-height: 120px;
        font-size: 21px;
    }

    .layui-table-tips-main {
        font-size: 30px;
    }

    th .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }

    .layui-btn-xs {
        height: 60px;
        line-height: 60px;
        panding: 0 10px;
        font-size: 30px;
    }

    .layui-layer-dialog .layui-layer-content {
        font-size: 40px !important;
        line-height: 40px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 30px;
        position: relative;
        color: #2d2d2d;
        font-weight: bold;
        word-break: break-all;
    }

    .layui-layer-btn a {
        padding: 10px 30px 20px 20px !important;
        font-size: 30px;
    }

    #foot_btn {
        margin-top: 5%;
    }

</style>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layuimini-search">
        <legend>待完成</legend>
        <div style="margin: 10px 10px 10px 10px">
            <table class="layui-hide" id="UnFinishTask" lay-filter="UnFinishTask"></table>
        </div>
    </fieldset>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="success">通过</a>
        <a class="layui-btn layui-btn-xs" lay-event="error">驳回</a>
    </script>
</div>
<div id="updateTaskDiv" style="display: none;padding: 0.3125rem">
    <form method="post" class="layui-form layui-form-pane" lay-filter="taskForm" id="taskForm">

        <div class="layui-form-item">
            <input type="hidden" name="id" id="id"/>
            <label class="layui-form-label">驳回原因</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="auditingreason" lay-verify="auditingreason" id="auditingreason"></textarea>
            </div>
        </div>

        <div class="layui-form-item" id="foot_btn">
            <div class="layui-input-block" style="text-align: center;">
                <a class="layui-btn " lay-submit="" lay-filter="doUpdateTask"><label
                        class="layui-icon layui-icon-release"></label>提交</a>
                <a class="layui-btn layui-btn-warm" onclick="javascript:$('#taskForm')[0].reset()"
                   lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
            </div>
        </div>
    </form>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
<!--,templet:function(d){
                            return '<div style = "text-align:left">'+d.reason+'</div>'
                        }-->
<script type="text/html" id="titleTpl">
    {{#  if(d.auditingstatus == null){ }}
    $("[data-field='auditingstatus']").css('display', 'none');
    {{#  }  }}
    {{#  if(d.auditingstatus == 0){ }}
    <div>待审核</div>
    {{#  } else if(d.auditingstatus == 1) { }}
    <div>已审核</div>
    {{#  } else if(d.auditingstatus == 2) { }}
    <div>待审核</div>
    {{# } }}
</script>
<!--templet: function (d) {
                            if (d.auditingstatus === null) {
                                $("[data-field='auditingstatus']").css('display', 'none');
                                $('.layui-table tbody tr td:eq(3) div').addClass('layui-hide');
                            }
                        }-->
<script type="text/javascript" th:inline="javascript">
    layui.use(['table', 'jquery', 'form', 'laydate'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;
        var username = /*[[${session.user.name}]]*/ "用户名称";
        let tableIns = table.render({
            elem: '#UnFinishTask'
            , url: '/task/selectAllTask'
            , cellMinWidth: 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , skin: 'nob'
            , cols:
                [
                    [
                        {
                            field: 'name',
                            width: '10%',
                            title: '姓名',
                            sort: true,
                            align: 'left'
                        }
                        ,
                        {
                            field: 'id',
                            width: '15%',
                            title: '零件编号',
                            sort: true,
                            align: 'left'
                        }
                        ,
                        {
                            field: 'reason',
                            width: '25%',
                            title: '原因',
                            sort: true,
                            align: 'left'
                        }
                       /* ,
                        {
                            field: 'auditingstatus',
                            width: '10%',
                            title: '审核状态',
                            sort: true,
                            align: 'center',
                            templet: function (d) {
                                var auditingStatus = d.auditingstatus;
                                console.log(auditingStatus)
                                if (auditingStatus == null) {
                                    $(function () {
                                        $(" [data-field='auditingstatus']").css('display', 'none');
                                    })
                                } else if (auditingStatus == 0) {
                                    return '<span>待审核</span>'
                                } else if (auditingStatus == 1) {
                                    return '<span>审核成功</span>'
                                } else if (auditingStatus == 2) {
                                    return '<span>审核失败</span>'
                                }
                            }
                        }*/
                        /*, {field: 'monovalent', width: '10%', title: '零件单价', align: 'center'}*/
                        /* , {field: 'status', width: '10%', title: '任务状态', align: 'center'}*/
                        ,
                        {
                            field: 'createTime',
                            title: '创建时间',
                            width: '15%',
                            align: 'left',

                            templet: "<div>{{d.createTime == null ? '' : layui.util.toDateString(d.createTime, 'yyyy-MM-dd ')}}</div>",
                        }
                        ,
                        {
                            field: 'finishTime',
                            width: '15%',
                            title: '完成时间',
                            sort: true,
                            align: 'left',

                            templet: "<div>{{d.finishTime == null ? '' : layui.util.toDateString(d.finishTime, 'yyyy-MM-dd ')}}</div>"
                        }
                        ,
                        {
                            fixed: 'right',
                            title: '审核',
                            width: "20%",
                            align: 'left',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
        });
        table.on('tool(UnFinishTask)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data, //获得当前行数据
                layEvent = obj.event; //获得 lay-event 对应的值
            let id = data.id;
            if (layEvent === 'success') {
                layer.confirm('确认已通过？', {icon: 1, area: ['40%', '40%']}, function () {
                    $.post("/task/auditingPass", {id, username}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg);
                            tableIns.reload();
                        } else {
                            layer.msg(res.msg);
                        }
                    })
                })
            } else if (layEvent === "error") {
                //layer.msg(JSON.stringify(data))
                openUpdateTask(data);
            }
        });

        var mainIndex;
        var url;

        function openUpdateTask(data) {
            mainIndex = layer.open({
                type: 1,
                title: '任务修改',
                area: ['80%', '40%'],
                content: $("#updateTaskDiv"),
                success: function (index) {
                    url = "/task/auditingFail"
                    form.val("taskForm", {
                        "id": data.id,
                    });
                }
            });
        }


        // 监听添加任务的提交
        form.on("submit(doUpdateTask)", function (data) {
            var data = data.field
            let params = $("#taskForm").serialize();
            // 提交数据
            $.post(url, {
                id: data.id,
                username:username,
                auditingreason: data.auditingreason
            }, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg)
                    tableIns.reload();
                } else {
                    layer.msg(res.msg)
                }
                layer.close(mainIndex);
            });
            return false;
        });

        laydate.render({
            elem: '#finishTime' //指定元素
            , theme: '#000000'
        });
    });
</script>
</body>
</html>